<template>
  <el-card>
    <div slot="header"
         class="clearfix">
      <!-- 面包屑导航 -->
      <bread :navone="'商品管理'"
             :navtwo="'商品列表'" />
    </div>
    <!-- 提示文本 -->
    <el-alert title="添加商品信息"
              type="info"
              center
              show-icon>
    </el-alert>
    <!-- 步骤条 -->
    <el-steps :active="indexac"
              align-center
              finish-status="success">
      <el-step title="基本信息"></el-step>
      <el-step title="商品参数"></el-step>
      <el-step title="商品属性"></el-step>
      <el-step title="商品图片"></el-step>
      <el-step title="商品内容"></el-step>
    </el-steps>
    <!-- tab导航 -->
    <el-tabs tabPosition='left'
             @tab-click="handleClick">
      <el-tab-pane label="基本信息">
        <el-form ref="form"
                 :model="form"
                 label-width="80px"
                 label-position='top'
                 :rules="rules">
          <el-form-item label="商品名称"
                        prop='goods_name'>
            <el-input v-model="form.goods_name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格"
                        prop='goods_price'>
            <el-input v-model="form.goods_price"></el-input>
          </el-form-item>
          <el-form-item label="商品重量"
                        prop='goods_weight'>
            <el-input v-model="form.goods_weight"></el-input>
          </el-form-item>
          <el-form-item label="商品数量"
                        prop='goods_number'>
            <el-input v-model="form.goods_number"></el-input>
          </el-form-item>
          <el-form-item label="商品分类">
            <template>
              {{value}}
              <el-cascader v-model="value"
                           :options="options"
                           :props="prop"></el-cascader>
            </template>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="商品参数">
        <div v-for="item in manydata"
             :key='item.id'>
          <p>{{item.attr_name}}</p>
          <div>
            <el-checkbox v-for="(item1) in item.attr_vals.split(',')"
                         :key='item1.id'
                         :label="item1"
                         border></el-checkbox>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="商品属性">
        <el-form ref="form"
                 :model="formshuxing"
                 label-width="80px"
                 label-position='top'>
          <el-form-item :label="item.attr_name"
                        v-for="(item,index) in onlydata"
                        :key='index'>
            <el-input v-model='item.attr_vals'></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="商品图片">
        {{fileList}}
        <el-upload class="upload-demo"
                   action="http://localhost:8888/api/private/v1/upload"
                   :headers="header"
                   :on-success='success'
                   :file-list="fileList"
                   :on-preview='preview'
                   :on-remove='remove'
                   list-type="picture">
          <el-button size="small"
                     type="primary">点击上传</el-button>
        </el-upload>
      </el-tab-pane>
      <el-tab-pane label="商品内容">
        <el-button type="primary"
                   @click='addgoods'>添加商品</el-button>
        <quill-editor v-model="contents">
        </quill-editor>
      </el-tab-pane>
    </el-tabs>
    <!-- 图片预览对话框 -->
    <el-dialog title="图片预览"
               :visible.sync="centerDialogVisible"
               width="30%"
               center>
      <el-image style="width: 100px; height: 100px"
                :src="urlimg"
                fit="contain"></el-image>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>

</template>

<script>
import bread from '../bread/bread.vue'
export default {
  components: {
    bread
  },
  created () {
    this.getcateg()
  },
  data () {
    return {
      indexac: 0, // 步骤条位置
      form: { // 表单数据
        goods_name: '',
        goods_price: '',
        goods_weight: '',
        goods_number: ''
      },
      rules: { // 表单规则
        goods_name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        goods_price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' }
        ],
        goods_weight: [
          { required: true, message: '请输入商品重量', trigger: 'blur' }
        ],
        goods_number: [
          { required: true, message: '请输入商品数量', trigger: 'blur' }
        ]
      },
      options: [], // 级联下拉框数据
      prop: { // 级联下拉框的匹配数据
        value: 'cat_id',
        label: 'cat_name',
        expandTrigger: 'hover'
      },
      value: [], // 级联下拉框的选择项
      manydata: [], // 对应分类的参数
      onlydata: [], // 对应分类的参数
      header: { 'Authorization': localStorage.getItem('token') }, // 图片上传报文头设置
      fileList: [], // 上传图片列表
      contents: '', // 富文本框内容
      urlimg: '',
      centerDialogVisible: false
    }
  },
  methods: {
    // 点击tab切换时触发
    handleClick (tab) {
      this.indexac = +tab.index
      if ((tab.index === '1' || tab.index === '2')) {
        if (this.value.length === 0) {
          return this.$message.error('未选择商品分类')
        } else {
          this.getcanshu(tab.index)
        }
      }
    },
    // 获取所有分类赋值给级联下拉框
    async getcateg () {
      let res = await this.$http.get('categories')
      let { meta, data } = res.data
      if (meta.status === 200) {
        this.options = data
      }
    },
    // 获取商品参数,和商品属性值
    async getcanshu (index) {
      let sel = index === '1' ? 'many' : 'only'
      let res = await this.$http.get(`categories/${this.value[this.value.length - 1]}/attributes?sel=${sel}`)
      let { meta, data } = res.data
      if (meta.status === 200) {
        if (index === '1') {
          this.manydata = data
        } else {
          this.onlydata = data
        }
      }
    },
    // 图片上传成功时
    success (res, file, fileLists) {
      this.fileList.push({ name: file.name, url: file.url })
    },
    // 点击图片时预览
    preview (file) {
      this.centerDialogVisible = true
      this.urlimg = file.url
    },
    addgoods () {
      let obj = {
        goods_name: this.form.goods_name,
        goods_number: +this.form.goods_number,
        goods_price: +this.form.goods_price,
        goods_weight: +this.form.goods_weight,
        goods_cat: this.value.join(','),
        goods_introduce: this.contents
      }
      console.log(obj)
      this.$http.post('goods', obj).then(res => {
        let { meta } = res.data
        if (meta.status === 201) {
          this.$message({
            type: 'success',
            message: meta.msg
          })
          this.$router.push('/home/goods')
        } else {
          this.$message.error(meta.msg)
        }
      })
    }
  }
}
</script>

<style>
.el-step__title {
  font-size: 12px;
}
.el-steps.el-steps--horizontal {
  margin-top: 20px;
}
.el-tabs.el-tabs--left {
  margin-top: 20px;
}
.ql-container.ql-snow {
  height: 200px;
}
</style>
